<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面(json)</title>
</head>
<body>


   <div id="app">

        <div class="login-box">

             <div>
                  用户名: <input type="text" v-model="user.username">
             </div>

            <div>
                 密码: <input type="text" v-model="user.password">
            </div>

             <div>
                  <button @click="btnLoginClick">登录</button>
             </div>

        </div>

   </div>

</body>

<script src="../lib/vue.global.js"></script>
<script src="../lib/axios.js"></script>

<script>

      const app = {
          data(){
               return {
                   user:{
                        username:'',
                        password:'',
                        isSuccess:false,
                        success:true
                   }
               }
          },methods:{
                btnLoginClick(){
                     axios({
                          url:'http://localhost:8080/user/login',
                          method:'post',
                          dataType:'json',
                          params:this.user
                     }).then((res)=>{

                          if(res.data.success){
                               window.location.href="index.html";
                          }else{
                               alert('用户名或者密码错误！')
                          }

                     })
                }
          }
      }


      Vue.createApp(app).mount('#app');

</script>


</html>